<template>
  <div>

	  <myheader></myheader>

	  <br /><br />

	  <Breadcrumb :datas="datas"></Breadcrumb>
	
	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				用户名: <input type="text" v-model="username">
			</div>
			<br><br>
			<div>
				密&nbsp;&nbsp;&nbsp;码: <input type="password" v-model="password">
			</div>
			<br><br>
			<center>
			<div>
				<!-- 应用滑块验证码 -->
				<drag-Verify
				
				:width='width'
				:height='height'
				:text='text'
				ref='Verify'
				></drag-Verify>
			</div>
			</center>
			<br><br>
			<div>
				<Button @click="submit">登录</Button>&nbsp;&nbsp;
				<img @click="sina" src="http://localhost:8000/static/sina.png">&nbsp;&nbsp;
				<img @click="dingding" src="http://localhost:8000/static/dingding.png">&nbsp;&nbsp;
			</div>
		</div>
	</section>
	
	<mufooter></mufooter>

  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

//导入滑块验证码
import dragVerify from 'vue-drag-verify';


export default {
  data () {
    return {
		//声明面包屑导航变量
	datas:[{title:"首页",route:{name:'index'}},{title:'登录页面',route:{name:'login'}}],
	  msg: "这是一个变量",
	  username:'',
	  password:'',
	  code:'',
	  width:300,
	  height:42,
	  text:'请将滑块拖动至右侧',

    }
  },
  //定义组件
  components:{
	  'myheader':myheader,
	  'mufooter':myfooter,
	  'dragVerify':dragVerify,
	},
  mounted:function(){
  
},
  methods:{

	  //钉钉登录
	  dingding(){
    	var appid = 'dingoaukgkwqknzjvamdqh';
    	var redirect_uri = 'http://localhost:8000/dingding_back/';

		var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='
		+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='
		+redirect_uri;

		window.location.href = url;
	  },

	  //sina  新浪微博登陆
	  sina:function(){
		  let url = "https://api.weibo.com/oauth2/authorize?client_id=2636039333&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

		  //跳转
		  window.location.href = url;
	  },
	  
	  //提交事件
	  submit:function(){

		  //判断用户是否拖动滑块
		  console.log(this.$refs.Verify.isPassing);

		  //判断用户是否输入
		  if(this.username == ""){
			  this.$Message("用户名不能为空");
			  return false;
		  }
		  if(this.password == ""){

			  this.$Message("密码不能为空")
			  return false
		  }

		  //请求后台接口
		  this.axios.get('http://localhost:8000/login/',{params:{username:this.username,
		  password:this.password}})
		  .then((result) =>{
			  console.log(result.data);
			  this.$Message(result.data.message);
			//   sessionStorage.setItem('username',result.data.username);
			//判断
			if(result.data.code == 200){
				//存储用户信息
					//用户名
				localStorage.setItem('username',result.data.username)
					//uid
				localStorage.setItem('uid',result.data.uid)

				//跳转页面
				this.$router.push('/');

			}else{
				this.$Message(result.data.message);
			}
		  })

	  }
     
  }
}


</script>
 
<style>



</style>